<template>
  <main-layout>
    <div class="mine">
      <!-- 循环通知 -->
      <van-notice-bar
        left-icon="volume-o"
        text="通知：2022年2月14日有重大活动，积极参加！奖品丰厚！ "
      />
      <!-- 头像 昵称 -->
      <div class="mine-info">
        <van-image
          round
          width="2.3rem"
          height="2.3rem"
          :src="this.userInfo.userPic"
        />
        <span class="user-nick">{{this.userInfo.nickName}}</span>
      </div>
      <div class="mine-func">
          <div class="collect-goods">
              收藏的商品
          </div>
          <div class="collect-people">
              关注的人
          </div>
          <div class="collect-goods">
              收藏的商品
          </div>
          <div class="collect-people">
              关注的人
          </div>
      </div>

      <!-- <van-grid gutter="15px" clickable :column-num="2">
                <van-grid-item icon="home-o" text="路由跳转" to="/" />
                <van-grid-item icon="search" text="URL 跳转" url="/vant/mobile.html" />
            </van-grid> -->
    </div>
  </main-layout>
</template>

<script>
export default {
    data() {
        return {
            userInfo: {
                userPic: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                nickName: '一只小猪猪'
            }
        }
    },
}
</script>

<style lang="less" scoped>
.mine {
  .mine-info {
    padding: 0 16px;
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    .user-nick {
      display: block;
      margin-left: 16px;
    }
  }
  .mine-func {
    //   background-color: cornflowerblue;
      width: 100%;
      padding: 16px;
      height: 400px;
      text-align: center;
      line-height: 50px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .collect-goods {
          background-color: #fff;
          width: 48%;
          height: 160px;
          box-shadow: 2px 2px 10px #c9c9c9;
      }
      .collect-people {
          background-color: #fff;
          width: 48%;
          height: 160px;
          box-shadow: 2px 2px 10px #c9c9c9;
      }
  }
}
</style>